<template>
	<div>
		<div class="bg">
			<img :src="img_url" width="100%" height="100%" alt="" />
		</div>
		<el-card class="box-card h100" style="opacity: 0.8;">
			<div slot="header">
				<!-- <span>最新公告</span> -->
				<PageHeader></PageHeader>
			</div>
			<div class="top_box">
				<div class="block">
					<span class="demonstration">自定义时间段</span>
					<el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</div>
				<div class="bt_box">
					<div class="demonstration">标题</div>
					<el-input v-model="obj.searchValue" placeholder="请输入内容" class="ipt"></el-input>
				</div>
				<div class="bt_box">
					<div class="demonstration">发文部门</div>
					<el-select v-model="obj.department" placeholder="请选择" class="ipt">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<el-button type="primary" @click='btn()'>搜索</el-button>
			</div>
			
			<div class="list_box">
				<el-table :data="list" style="width: 100%">
					<el-table-column prop="type" label="状态" width="180">
		
					</el-table-column>
					<el-table-column prop="docSubject" label="标题" width="500">
					</el-table-column>
					<el-table-column prop="fdName" label="发文部门" width="180">
					</el-table-column>
					<el-table-column prop="docPublishTime" label="创建时间">
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="100">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
						</template>
		
					</el-table-column>
				</el-table>
				<div class="block">
					<el-pagination
					      @size-change="handleSizeChange"
					      @current-change="handleCurrentChange"
					      layout="total, prev, pager, next"
						  background
					      :total="total">
					    </el-pagination>
				</div>
			</div>
			<!-- <div class="z_box" v-show="show">
				<div class="box">
					<i class="el-icon-close close" @click='close()'></i>
					<div class="title">{{data.docSubject}}</div>
					<div v-html='data.docContent' class="content">
		
					</div>
					
				</div>
			</div> -->
			<topdata v-show='show' :data='data' @close='close'></topdata>
		</el-card>
	</div>
	
</template>

<script>
	import {
		getOaNotice,
		getOa,
		getPost
	} from '@client/addHome/service'
	import { getReceptionSkin } from '@/api/system/config'
	import topdata from "../xxlist/xxmodule.vue"
	 import PageHeader from '@/components/PageHeader'
	  import { getOaNotReading } from '@client/addHome/service'
	export default {
		components:{
			topdata,
			PageHeader
		},
		data() {
			return {
				list: [],
				obj: {

					searchValue: "",
					department: '',
					pageNum: 1,
					pageSize: 10,
					createTime: '',
					updateTime: ''
				},
				time: '',
				options: [{
						value: '',
						label: '全部'
					},
					{
						value: '信息中心',
						label: '信息中心'
					},
				],

				data: "",
				show: false,
				total: 0,
				img_url:"",
				bg:''
		

			}
		},
		mounted() {
			//this.$route.meta.title='最新公告'
			this.init()
		},
		methods: {
			init() {
				if (this.tiem != '') {
					this.obj.createTime = this.time[0],
						this.obj.updateTime = this.time[1]
				}
				getPost(this.obj).then(res => {
					if (res.code == 200) {
						this.total = res.total
						this.list = res.rows
						this.list.forEach((a, b) => {
							a.stt = '查看详情'
							a.type = a.type == 1 ? "未读" : "已读"
							a.docPublishTime = rTime(a.docPublishTime)
						})

						function rTime(date) {
							var json_date = new Date(date).toJSON();
							return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ')
								.replace(/\.[\d]{3}Z/, '')
						}

					}
				})
				 getReceptionSkin().then(res=>{
					if(res.code==200){
						this.img_url=res.data.skinUrl
						console.log(this.img_url)
					}
				 })
			},
			btn() {
				this.init()
        console.log(this.time)
			},
			handleClick(val) {
				
				getOa(val.fdId).then(res => {
					if (res.code == 200) {
						//this.total = res.total
						this.show = true
						this.data = res.data
						this.list.forEach((a, b) => {
							if (a.fdId == val.fdId) {
								a.type = '已读'
								getOaNotReading().then(res=>{
											if(res.code==200){
												this.$store.commit('nums',res.data)
											}
										})
							}

						})
					}
				})

			},
			close() {
				this.show = false
			},
			handleSizeChange(val){
				this.obj.pageNum=val
				this.init()
			},
			handleCurrentChange(val){
			    this.obj.pageNum=val
				this.init()
			}
		}
	}
</script>

<style scoped>
	.top_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 50px;
		
	}

	.bt_box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 50px;
	}

	.demonstration {
		margin-right: 10px;
	}

	.ipt {
		height: 30px;
		width: 200px;
	}

	>>>.el-input--suffix {
		height: 100%;
	}

	.list_box {
		margin-top: 50px;
		cursor: pointer;
		
	}

	.bj {
		background-color: red;
	}

	.z_box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgb(0, 0, 0, 0.3);
		z-index: 999;
	}

	.box {
		position: absolute;
		max-width: 2000px;
		min-width: 1000px;
		height:600px;
		color: #000;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 10px;
		display: flex;
		flex-direction: column;
	}

	.content {
		height: 90%;
		overflow-y: scroll;
		padding: 20px 30px;
	}

	.btn {
		width: 100px;
		position: absolute;
		bottom: 10px;
		right: 10px;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		font-size: 20px;
		font-weight: bold;
		padding: 0 50px;
	}

	.close {
		position: absolute;
		right: 20px;
		top: 10px;
		font-size: 24px;
	}
	.bg{
	    width:100%;  
	    height:100%;  /**宽高100%是为了图片铺满屏幕 */
	    z-index:-1;
	    position: absolute;
	}
	/* >>>.el-card{background: none !important;} */
</style>
